/**
  需求：点击出现波浪效果

  主类名: `.waves-effect`
  附加类名:
    `.waves-button`半圆角按钮样式。
    `.waves-float`用于单击元素时浮点效果。
    `.waves-circle`用于圆形（圆环）样式。
    `.waves-block`用于添加到元素=>`display: block;`
  FIXME: 
    默认情况下，如果您在 Windows Phone 中使用 IE 访问网页，
    则当您点击链接或按钮时，将获取点击高光效果，此高光将隐
    藏"波浪"效果。为了防止这种情况发生，您需要在标头上添加
    元标记。`msapplication-tap-highlight`
 */

/* ==============
Waves Effect: 点击效果灵感来自谷歌的材料设计`Material Design`
===================*/

/*!
* Waves v0.7.6
* [官网](http://fian.my.id/Waves)
* [Waves's MIT license](https://github.com/fians/Waves/blob/master/LICENSE)
*/
import { ObjectDirective } from 'vue';

/**
 * 将对象style转化为string形式
 * @param {Object} obj
 * @return {string} str
 */
function convertStyle(obj: any): string {
  var style = '';
  for (var a in obj) {
    if (obj.hasOwnProperty(a)) {
      style += (a + ':' + obj[a] + ';');
    }
  }
  return style;
}
const wavesEffect: ObjectDirective<any, string | Array<string>> = {
  mounted: function (el, binding) {
    const { value } = binding;
    el.className += ' waves-effect';
    /**
     * ECMAScript3: 只有一个全局作用域而言，使用instanceof操作符
     * ECMAScript5: 增加了一个方法 `isArray()`, 兼容性差
     * 
     * 由于原生数组的构造函数名与全局作用域无关，因此用toString()方法，保证返
     * 回一样的结果;存在问题：Object.prototype.toString()本身也可能会被修改
     * Object.prototype.toString.call(value) == '[object Array]' || value instanceof Array
     */
    if (value && value.length > 0) {
      if (typeof value === "string") {
        el.className += (' waves-' + value);
      } else {
        el.className += value.map((item: string) => (' waves-' + item)).join('');
      }
    }
    // 储存事件function
    el.wavesHandler = function (e: any) {
      // 执行动画
      let ripple = document.createElement('div');
      ripple.classList.add('waves-ripple');
      el.appendChild(ripple);
      let oStyle = {
        'left': e.layerX + 'px',
        'top': e.layerY + 'px',
        'opacity': 1,
        'transform': 'scale(' + ((el.clientWidth / 100) * 10) + ')',
        'transition-duration': '750ms',
        'transition-timing-function': 'cubic-bezier(0.250, 0.460, 0.450, 0.940)'
      };
      ripple.setAttribute('style', convertStyle(oStyle));
      // 延时删除
      el.wavesTimer = setTimeout(function () {
        ripple.setAttribute('style', convertStyle({
          'opacity': 0,
          'transform': oStyle.transform,
          'transition-duration': '750ms',
          'left': oStyle.left,
          'top': oStyle.top
        }));
        setTimeout(function () {
          ripple && el.removeChild(ripple);
        }, 750);
      }, 450);
    };
    el.addEventListener('mousedown', el.wavesHandler, false);
  },
  unmounted(el) {
    el.wavesTimer && clearTimeout(el.wavesTimer);
    el.wavesHandler && el.removeEventListener('mousedown', el.wavesHandler);
  }
}


export default wavesEffect;
